<%@page contentType="text/html; charset=UTF-8" language="java"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加产品信息</title>
<!-- begin header 头部 -->
<%@include file="include/header.jsp"%>
<link rel="stylesheet" href="${contextPath }/css/uploadify.css">
<!-- end header -->
</head>
<body>
	<c:set var="product_list_current" value="active" />
	<!-- begin 导航条 -->
	<%@include file="include/nav.jsp"%>
	<!-- end 导航条 -->
	<div class="row">
		<!-- begin菜单 -->
		<%@include file="include/menu.jsp"%>
		<!-- end菜单 -->
		<div class="span9">
			<div class="row">
				<ul class="breadcrumb">
					<li><a href="${contextPath }/innov/product_list.do">产品列表</a> <span class="divider">/</span></li>
					<li class="active">编辑产品</li>
				</ul>
			</div>
			<div class="row">
				<div class="span2">
					<img id="img" width="154" height="154" alt="上传的图片" src="${product.product.images }"
						class='img-polaroid'
					/> <br/><a data-toggle="modal" href="#images" class="btn btn-primary">选择图片</a>
				</div>
				<form action="${contextPath }/innov/product_add.do" class="form-horizontal" method="post">
					<input type="hidden" name="id" value="${product.product.id }"/>
					<input type="hidden" name="image" id="input_image" value="${product.product.images }"/>
					<div class="span7" id="form">
						<div class="control-group">
							<label class="control-label" for="pname">产品名称：</label>
							<div class="controls">
								<input type="text" class="input-xxlarge" name="pname" id="pname" value="${product.product.name }" />
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="pdescription">产品概要描述：</label>
							<div class="controls">
								<textarea name="pdescription" id="pdescription" class="input-xxlarge" style="resize: none;"
									rows="3" cols=""
								>${product.product.description }</textarea>
							</div>
						</div>
						<input name="product_attrs" id="product_attrs" type="hidden" />
						<c:forEach items="${product.attrs }" var="attr">
						<div class="control-group attr">
							<input type="text" class="input-mini control-label" value="${attr.name }"/>
							<div class="controls">
								<input type="text" class="input-xlarge" value="${attr.value }" />
									<a href="#" class="btn btn-link">删除</a>
							</div>
						</div>
						</c:forEach>
						
						<div class="control-group">
							<div class="controls">
								<button class="btn btn-primary" id="add_attr">添加属性</button>
							</div>
						</div>
						<input name="productinfo" id="productinfo" type="hidden" />
					</div>
					<div class="row">
				<div class="span2">
					<span class="help-block">产品详细描述：</span>
				</div>
				<div class="span7">
					<textarea class="span7" id="productinfo_d" rows="20" cols="700">${product.productInfo.info }</textarea>
				</div>
			</div>
			<div class="row">
				<div class="span2"></div>
				<div class="span7">
							<button class="btn btn-primary" id="submit">更新产品</button>
						</div>
			</div>
				</form>
			</div>
			
		</div>
	</div>
	<div id="images" class="modal hide fade in" style="display: none;">
		<div class="modal-header">
			<a class="close" data-dismiss="modal">x</a>
			<h3>图片</h3>
		</div>
		<div class="modal-body">
			<h4>点击图片进行选择</h4>
			<table class="table table-striped">
				<thead>
					<tr>
						<th>&nbsp;</th>
						<th>图片</th>
						<th>文件名称</th>
						<th>上传时间</th>
					</tr>
				</thead>
				<tbody id="imagebody">
				
				</tbody>
			</table>
		</div>
	</div>
	<!-- begin foot 依赖-->
	<%@include file="include/foot.jsp"%>
	<script type="text/javascript" src="${contextPath }/js/tiny_mce/tiny_mce.js"></script>
	<script type="text/javascript" src="${contextPath }/js/jquery.form.js"></script>
	<script type="text/javascript">
		var contextPath = '${contextPath}';
		tinyMCE
				.init({
					mode : "exact",
					elements : 'productinfo_d',
					theme : "advanced",
					plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave,visualblocks",

					// Theme options
					theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
					theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
					theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
					theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,visualblocks",
					theme_advanced_toolbar_location : "top",
					theme_advanced_toolbar_align : "left",
					theme_advanced_statusbar_location : "bottom",
					theme_advanced_resizing : true,
				});
		$(function() {
			var c = 0;
			var attrHtml = '<div class="control-group attr"><input type="text" class="input-mini control-label" placeholder="填写产品属性名: "/><div class="controls"><input type="text" class="input-xlarge" placeholder="请填写产品名称" /><a href="#" class="btn btn-link">删除</></div>';
			
			$('a', $('.attr')).click(function(){$(this).parent().parent().remove(); return false});
			
			$('#add_attr').click(function() {
				var p = $(this).parent().parent();
				p.before(attrHtml);
				$('a', p.prev()).click(function() {
					$(this).parent().parent().remove();
				});
				return false;
			});
			/* $('form').submit(function() {
				$(this).ajaxSubmit({
					beforeSubmit : showRequest,
					success: function(response) {
						if(response.r == 0) {
							alert('添加产品成功');
							location.href=contextPath + "/innov/product_add.do";
						}
					}
				});
				return false;
			}); */
			$('#submit').click(
					function() {
						var attrs = '';
						$('.attr').each(
								function() {
									var t = $(this);
									attrs += $('.input-mini', t).val() + '@#@'
											+ $('.input-xlarge', t).val()
											+ "@;@";
								});
						$('#product_attrs').val(attrs);
						$('#productinfo').val(
								tinyMCE.get('productinfo_d').getContent());
						$('form').submit();
					});
			$.ajax({
				type:'GET',
				url:'${contextPath}/list_file.do',
				success: function(data) {
					$.each(data.files, function(i,v){
						var tr = $('<tr></tr>');
						tr.append('<td>' + (i + 1) + "</td>");
						tr.append('<td><a href="${contextPath}/serve.do?key=' + v.md5_hash +'"><img src="http://localhost:8888/serve.do?key=' + v.md5_hash + '&width=40&height=40" class="img-polaroid"/></a></td>');
						tr.append('<td>' + v.filename + '</td>');
						tr.append('<td>' + v.creation + '</td>');
						$('a', tr).click(function(){
							$('#img').attr("src",$($(this)).attr('href'));
							$('#images').modal('hide');
							$('#input_image').val($($(this)).attr('href'));
							return false;
						});
						$('#imagebody').append(tr);
					});
				}
			});
		});
	/* 	function showRequest(formData, jqForm, options) {
			var queryString = $.param(formData);
			return true;
		} */
		function delete_attr() {
			return false;
		}
	</script>
	<!-- end foot 依赖 -->
</body>
</html>